<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>服务监控-主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <style>
        .layui-badge{
            background-color: #1890ff!important;
        }

        .message_box{
            display: flex;
            align-items: center;
            background-color: #e6f7ff;
            border: 1px solid #91d5ff;
            box-sizing: border-box;
            padding: 8px 15px 8px 0px;
            margin: 15px 2.5%;
            border-radius: 4px
        }

        #update:hover{
            opacity: .8;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="message_box">
            <i class="layui-icon layui-icon-tips" style="color: #1890ff;padding-left: 15px;"></i>
            <p style="margin: 0 5px">上次更新时间：<span class="updateTime"></span></p>
            <div style="color: #e8e8e8; margin-right: 15px">|</div>
            <a id="update" style="color: #1890ff;cursor: pointer">立即更新</a>
        </div>
        <div style="display: flex; flex-wrap: wrap; justify-content: space-around;">
            <!-- CPU -->
            <table class="layui-table" lay-skin="line" style="width: 45%; min-width: 500px;">
                <colgroup><col data-th-width="150"><col data-th-width="200"></colgroup>
                <thead><tr><th><span class="layui-badge">CPU</span></th><th></th></tr></thead>
                <thead><tr><th>属性</th><th>值</th></tr></thead>
                <tbody>
                    <tr><td>核心数</td><td class="cpuNum"></td></tr>
                    <tr><td>用户使用率</td><td class="cpuUsed"></td></tr>
                    <tr><td>系统使用率</td><td class="cpuSys"></td></tr>
                    <tr><td>当前空闲率</td><td class="cpuIdle"></td></tr>
                </tbody>
            </table>

            <!-- 内存 -->
            <table class="layui-table" lay-skin="line" style="width: 45%; min-width: 500px;">
                <colgroup><col data-th-width="150"><col data-th-width="200"></colgroup>
                <thead><th><span class="layui-badge layui-bg-green">内存</span></th><th></th><th></th></thead>
                <thead><th>属性</th><th>内存</th><th>JVM</th></thead>
                <tbody>
                    <tr><td>总内存</td><td class="memTotal"></td><td class="jvmTotal"></td></tr>
                    <tr><td>已用内存</td><td class="memUsed"></td><td class="jvmUsed"></td></tr>
                    <tr><td>剩余内存</td><td class="memIdle"></td><td class="jvmIdle"></td></tr>
                    <tr><td>使用率</td><td class="memUsedRate"></td><td class="jvmUsedRate"></td></tr>
                </tbody>
            </table>

            <!-- 服务器信息 -->
            <table class="layui-table" lay-skin="line" style="width: 45%; min-width: 500px;">
                <colgroup><col data-th-width="150"><col data-th-width="200"></colgroup>
                <thead><tr><th><span class="layui-badge">服务器信息</span></th><th></th></tr></thead>
                <thead><tr><th>属性</th><th>值</th></tr></thead>
                <tbody>
                    <tr><td>服务器名称</td><td class="serverName"></td></tr>
                    <tr><td>服务器IP</td><td class="serverIp"></td></tr>
                    <tr><td>操作系统</td><td class="osName"></td></tr>
                    <tr><td>系统架构</td><td class="osArch"></td></tr>
                </tbody>
            </table>

            <!-- Java虚拟机信息 -->
            <table class="layui-table" lay-skin="line" style="width: 45%; min-width: 500px;">
                <colgroup><col data-th-width="150"><col data-th-width="200"></colgroup>
                <thead><tr><th><span class="layui-badge">Java虚拟机信息</span></th><th></th></tr></thead>
                <thead><tr><th>属性</th><th>值</th></tr></thead>
                <tbody>
                    <tr><td>Java名称</td><td class="jvmName"></td></tr>
                    <tr><td>Java版本</td><td class="jvmVersion"></td></tr>
                    <tr><td>安装路径</td><td class="jvmPath"></td></tr>
                    <tr><td>项目路径</td><td class="projectPath"></td></tr>
                    <tr><td>启动时间</td><td class="jvmStartTime"></td></tr>
                    <tr><td>运行时长</td><td class="jvmRunTime"></td></tr>
                </tbody>
            </table>

            <!-- 磁盘状态 -->
            <table class="layui-table" lay-skin="line" style="width: 95%; min-width: 500px;">
                <colgroup><col data-th-width="150"><col data-th-width="200"></colgroup>
                <thead><tr><th><span class="layui-badge">磁盘状态</span></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead>
                <thead><th>盘符路径</th><th>文件系统</th><th>盘符类型</th><th>总大小</th><th>可用大小</th><th>已用大小</th><th>已用百分比</th></thead>
                <tbody class="discs">

                </tbody>
            </table>
        </div>
    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form', 'util','notice'], function () {
        let $ = layui.jquery,
            notice = layui.notice,
            util = layui.util;

            let ctxPath = /*[[@{/}]]*/'';

        //打开页面加载
        $(function () {
            getData();
        });
        //点击按钮触发
        $('#update').click(function () {
            getData();
        });

        // 获取数据
        function getData() {
            let index = layer.load(2, {shade: 0.1});
            $.ajax({
                url: ctxPath + 'system/server/allInfo',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    layer.close(index);
                    if(res.code === 200){
                        renderData(res.data);
                    }else{
                        notice.error(res.msg);
                    }
                }
            });
        }

        // 渲染数据
        function renderData(data) {
            $('.updateTime').text(util.toDateString(new Date(), 'yyyy年MM月dd日 HH时mm分ss秒'));
            // CPU
            $('.cpuNum').text(data.cpu.cpuNum);
            $('.cpuUsed').text(data.cpu.userUsedRate + '%');
            $('.cpuSys').text(data.cpu.sysUsedRate + '%');
            $('.cpuIdle').text(data.cpu.cpuIdleRate + '%');
            // 内存
            $('.memTotal').text(data.mem.total + 'GB');
            $('.memUsed').text(data.mem.usedTotal + 'GB');
            $('.memIdle').text(data.mem.idleTotal + 'GB');
            $('.memUsedRate').text(data.mem.usedRate + '%');
            $('.jvmTotal').text(data.mem.jvmTotal + 'MB');
            $('.jvmUsed').text(data.mem.jvmUsedTotal + 'MB');
            $('.jvmIdle').text(data.mem.jvmIdleTotal + 'MB');
            $('.jvmUsedRate').text(data.mem.jvmUsedRate + '%');
            // 服务器信息
            $('.serverName').text(data.operSys.serverName);
            $('.serverIp').text(data.operSys.serverIp);
            $('.osName').text(data.operSys.osName);
            $('.osArch').text(data.operSys.osArch);
            // Java虚拟机信息
            $('.jvmName').text(data.jvm.jdkName);
            $('.jvmVersion').text(data.jvm.jdkVersion);
            $('.jvmPath').text(data.jvm.jdkPath);
            $('.projectPath').text(data.operSys.projectPath);
            $('.jvmStartTime').text(data.jvm.jdkStartTime);
            $('.jvmRunTime').text(data.jvm.jdkRunTime);
            // 磁盘状态
            let discs = data.discs;
            $('.discs').empty();
            if(null != discs && 0 < discs.length){
                let str = '';
                for(let i = 0, len = discs.length;i < len;i++){
                    str += '<tr>' +
                        '<td>'+discs[i].discName+'</td>' +
                        '<td>'+discs[i].discType+'</td>' +
                        '<td>'+discs[i].fileType+'</td>' +
                        '<td>'+discs[i].discTotal+'</td>' +
                        '<td>'+discs[i].discIdleTotal+'</td>' +
                        '<td>'+discs[i].discUsedTotal+'</td>' +
                        '<td>'+discs[i].discUsedRate+'%</td>' +
                        '</tr>';
                }
                $('.discs').html(str);
            }
        }
    });
</script>
</body>
</html>